<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="screenName" label="大屏名称" />
        <el-table-column prop="createBy" label="创建者" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateBy" label="更新者" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column prop="enable" label="是否启用" />
        <el-table-column v-permission="['admin','dataConfig:edit','dataConfig:del']" label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1020px">
        <el-form ref="form" :model="form" :rules="rules" size="small">
          <el-form-item label="大屏名称">
            <el-input v-model="form.screenName" />
          </el-form-item>
          <el-form-item label="项目值">
            <el-input v-model="form.itemValue" />
          </el-form-item>
          <el-form-item label="大屏类型">
            <el-input v-model="form.screenType" readonly />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-input v-model="form.enable" />
          </el-form-item>
          <el-form-item label="参考示例">
            <el-input v-model="form.example" readonly />
          </el-form-item>
          <div class="box">
            <div class="tit">取号概况</div>
            <el-form-item label="大厅总取号量">
              <el-input v-model="form.numberStatus.takeNumber" />
            </el-form-item>
            <el-form-item label="大厅总办件量">
              <el-input v-model="form.numberStatus.takeNumberOnline" />
            </el-form-item>
            <el-form-item label="今日取号量">
              <el-input v-model="form.numberStatus.inNumber" />
            </el-form-item>
            <el-form-item label="当前办理量">
              <el-input v-model="form.numberStatus.currentHanlderNum" />
            </el-form-item>
            <!--            <el-form-item label="大厅排队时长">-->
            <!--              <el-input v-model="form.numberStatus.hallQueueTime" />-->
            <!--            </el-form-item>-->
            <el-form-item label="正在等待量">
              <el-input v-model="form.numberStatus.wait" />
            </el-form-item>
          </div>
          <div class="box">
            <div class="tit">好差评</div>
            <el-form-item label="非常满意">
              <el-input v-model="form.evaluate.satisfaction" />
            </el-form-item>
            <el-form-item label="满意">
              <el-input v-model="form.evaluate.good" />
            </el-form-item>
            <el-form-item label="基本满意">
              <el-input v-model="form.evaluate.normal" />
            </el-form-item>
            <el-form-item label="不满意">
              <el-input v-model="form.evaluate.bad" />
            </el-form-item>
          </div>
          <div class="box">
            <div class="tit">业务受理情况</div>
            <el-form-item label="当周收件总量">
              <el-input v-model="form.business.weekNum" />
            </el-form-item>
            <el-form-item label="窗口端收件量">
              <el-input v-model="form.business.windowNum" />
            </el-form-item>
            <el-form-item label="其他收件量">
              <el-input v-model="form.business.otherNum" />
            </el-form-item>
            <el-form-item label="当周”一网通办“收件率">
              <el-input v-model="form.business.weekMatterRate" />
            </el-form-item>
            <el-form-item label="当月”一网通办“收件率">
              <el-input v-model="form.business.monthMatterRate" />
            </el-form-item>
          </div>
          <div class="box">
            <div class="tit">全局概览</div>
            <el-form-item label="网上取号数">
              <el-input v-model="form.global.hallNum" />
            </el-form-item>
            <el-form-item label="本月办件量">
              <el-input v-model="form.global.yearNum" />
            </el-form-item>
            <el-form-item label="本年办件量">
              <el-input v-model="form.global.monthNum" />
            </el-form-item>
            <el-form-item label="办件评价率">
              <el-input v-model="form.global.hanlderRate" />
            </el-form-item>
            <el-form-item label="服务满意率">
              <el-input v-model="form.global.serveRate" />
            </el-form-item>
          </div>
          <!--          <div class="box">-->
          <!--            <div class="tit">地图</div>-->
          <!--            <el-form-item label="常驻人口">-->
          <!--              <el-input v-model="form.map.population" />-->
          <!--            </el-form-item>-->
          <!--            <el-form-item label="本月办件量">-->
          <!--              <el-input v-model="form.map.oldRate" />-->
          <!--            </el-form-item>-->
          <!--          </div>-->
          <div class="box">
            <div class="tit">
              综合受理情况
              <el-button type="primary" @click="addRow">新增一行</el-button>
            </div>
            <div class="table-form">
              <div v-for="(item, index) in hanlderStatus" :key="'zhsl' + index" class="item">
                <el-form-item label="目录名称">
                  <el-input v-model="item.catelog" />
                </el-form-item>
                <el-form-item label="条线">
                  <el-input v-model="item.line" />
                </el-form-item>
                <el-form-item label="大厅网办收件数">
                  <el-input v-model="item.hallNum" />
                </el-form-item>
                <el-form-item label="窗口端收件数">
                  <el-input v-model="item.windowNum" />
                </el-form-item>
                <el-form-item label="移动端收件数">
                  <el-input v-model="item.mobileNum" />
                </el-form-item>
                <el-form-item label="异地网办收件数">
                  <el-input v-model="item.allopatricNum" />
                </el-form-item>
                <el-form-item label="操作">
                  <el-button type="danger" @click="delRow(index)">删除</el-button>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="tit">服务事项</div>
            <el-form-item label="依申请行政权力事项数">
              <el-input v-model="form.serveMatter.qlMatter" />
            </el-form-item>
            <el-form-item label="政务服务2.0事项数">
              <el-input v-model="form.serveMatter.zwfwMatter" />
            </el-form-item>
            <el-form-item label="依申请公共服务事项数">
              <el-input v-model="form.serveMatter.ggfwMatter" />
            </el-form-item>
            <el-form-item label="2.0发生办件事项数">
              <el-input v-model="form.serveMatter.fsbjMatter" />
            </el-form-item>
          </div>
          <!--          <div class="box">-->
          <!--            <div class="tit">-->
          <!--              人员绩效考核-->
          <!--              <el-button type="primary" @click="addRowRy">新增一行</el-button>-->
          <!--            </div>-->
          <!--            <div class="table-form">-->
          <!--              <div v-for="(item, index) in personalAssess" :key="'ryjx' + index" class="item item1">-->
          <!--                <el-form-item label="窗口">-->
          <!--                  <el-input v-model="item.window" />-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="工号">-->
          <!--                  <el-input v-model="item.id" />-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="姓名">-->
          <!--                  <el-input v-model="item.name" />-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="图片">-->
          <!--                  <el-upload-->
          <!--                    class="avatar-uploader"-->
          <!--                    :action="minioSingleFileUploadApi"-->
          <!--                    :show-file-list="false"-->
          <!--                    :on-success="(res)=>{handleSuccess(res, item, index)}"-->
          <!--                    :on-error="handleError"-->
          <!--                  >-->
          <!--                    <img v-if="item.picUrl" :src="item.picUrl" class="avatar">-->
          <!--                    <i v-else class="el-icon-plus avatar-uploader-icon" />-->
          <!--                  </el-upload>-->
          <!--                </el-form-item>-->
          <!--                <el-form-item label="操作">-->
          <!--                  <el-button type="danger" @click="delRowRy(index)">删除</el-button>-->
          <!--                </el-form-item>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="box">
            <div class="tit">月度分析总览</div>
            <el-form-item label="本地取号量">
              <el-input v-model="form.monthAnalyse.totalCall" />
            </el-form-item>
            <el-form-item label="本地取号量环比">
              <el-input v-model="form.monthAnalyse.totalCallRate" />
            </el-form-item>
            <el-form-item label="好评数">
              <el-input v-model="form.monthAnalyse.goodEval" />
            </el-form-item>
            <el-form-item label="好评数环比">
              <el-input v-model="form.monthAnalyse.goodEvalRate" />
            </el-form-item>
            <el-form-item label="差评数">
              <el-input v-model="form.monthAnalyse.badEval" />
            </el-form-item>
            <el-form-item label="差评数环比">
              <el-input v-model="form.monthAnalyse.badEvalRate" />
            </el-form-item>
          </div>
          <div class="box">
            <div class="tit">
              月度分析事项列表
              <el-button type="primary" @click="addRowYd">新增一行</el-button>
            </div>
            <div class="table-form">
              <div v-for="(item, index) in matterDetail" :key="'ydsxlb' + index" class="item">
                <el-form-item label="事项名称">
                  <el-input v-model="item.matterName" />
                </el-form-item>
                <el-form-item label="数值">
                  <el-input v-model="item.number" />
                </el-form-item>
                <el-form-item label="环比">
                  <el-input v-model="item.rate" />
                </el-form-item>
                <el-form-item label="操作">
                  <el-button type="danger" @click="delRowYd(index)">删除</el-button>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="tit">
              街道办事分析
              <el-button type="primary" @click="addRowJd">新增一行</el-button>
            </div>
            <div class="table-form">
              <div v-for="(item, index) in streetHandler" :key="'jdbs' + index" class="item item1">
                <el-form-item label="名称">
                  <el-input v-model="item.matterName" />
                </el-form-item>
                <el-form-item label="数值">
                  <el-input v-model="item.matterNum" />
                </el-form-item>
                <el-form-item label="操作">
                  <el-button type="danger" @click="delRowJd(index)">删除</el-button>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudDataConfig from '@/api/dataConfig'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { Notification } from 'element-ui'
import { mapGetters } from 'vuex'

const defaultForm = {
  id: null,
  moduleName: null,
  itemName: null,
  itemValue: null,
  moduelOrder: null,
  itemOrder: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  screenType: null,
  screenName: null,
  moduleId: null,
  enable: null,
  itemId: null,
  example: null,
  numberStatus: {},
  evaluate: {},
  business: {},
  global: {},
  map: {},
  hanlderStatus: {},
  serveMatter: {},
  personalAssess: {},
  monthAnalyse: {
    matterDetail: []
  },
  streetHandler: {}
}
const defaultTableObj = {
  allopatricNum: '',
  catelog: '',
  hallNum: '',
  line: '',
  mobileNum: '',
  windowNum: ''
}
const defaultStreetObj = {
  matterNum: '',
  matterName: ''
}
const defaultPeopleObj = {
  picUrl: '',
  window: '',
  id: '',
  name: ''
}
const defaultMatterDetailObj = {
  matterName: '',
  number: '',
  rate: ''
}
export default {
  name: 'DataConfig',
  // eslint-disable-next-line vue/no-unused-components
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  computed: {
    ...mapGetters([
      'minioSingleFileUploadApi'
    ])
  },
  cruds() {
    return CRUD({ title: '数据大屏配置', url: 'api/dataConfig', sort: 'id,desc', crudMethod: { ...crudDataConfig }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'dataConfig:add'],
        edit: ['admin', 'dataConfig:edit'],
        del: ['admin', 'dataConfig:del']
      },
      hanlderStatus: [JSON.parse(JSON.stringify(defaultTableObj))],
      personalAssess: [JSON.parse(JSON.stringify(defaultPeopleObj))],
      streetHandler: [JSON.parse(JSON.stringify(defaultStreetObj))],
      matterDetail: [JSON.parse(JSON.stringify(defaultMatterDetailObj))],
      rules: {
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.beforeToEdit](data, form) {
      console.log(data, form)
      if (form.itemValue) {
        const val = JSON.parse(form.itemValue)
        this.form = {
          ...form,
          ...val
        }
        this.personalAssess = val.personalAssess
        this.hanlderStatus = this.objToTableList(val.hanlderStatus)
        this.streetHandler = this.objToTableList(val.streetHandler)
        this.matterDetail = val.monthAnalyse.matterDetail
      } else {
        this.form = form
        this.personalAssess = [JSON.parse(JSON.stringify(defaultTableObj))]
        this.hanlderStatus = [JSON.parse(JSON.stringify(defaultPeopleObj))]
        this.streetHandler = [JSON.parse(JSON.stringify(defaultStreetObj))]
        this.matterDetail = [JSON.parse(JSON.stringify(defaultMatterDetailObj))]
      }
      return true
    },
    [CRUD.HOOK.beforeSubmit]() {
      const hanlderStatus = {}
      for (const i in defaultTableObj) {
        hanlderStatus[i] = this.hanlderStatus.map(item => {
          return item[i]
        })
      }
      const streetHandler = {}
      for (const i in defaultStreetObj) {
        streetHandler[i] = this.streetHandler.map(item => {
          return item[i]
        })
      }
      const monthAnalyse = this.form.monthAnalyse
      monthAnalyse.matterDetail = this.matterDetail
      console.log('提交的事项数据', monthAnalyse)
      const form = {
        numberStatus: this.form.numberStatus,
        evaluate: this.form.evaluate,
        business: this.form.business,
        global: this.form.global,
        map: this.form.map,
        serveMatter: this.form.serveMatter,
        personalAssess: this.form.personalAssess,
        hanlderStatus,
        streetHandler,
        monthAnalyse
      }
      console.log('提交的总数据', form)
      this.crud.form.itemValue = JSON.stringify(form)
      return true
    },
    objToTableList(obj) {
      let max = 0
      for (const i in obj) {
        if (obj[i] && obj[i].length > max) {
          max = obj[i].length
        }
      }
      const res = new Array(max).fill({}).map((item, index) => {
        const data = {}
        for (const i in obj) {
          data[i] = obj[i][index]
        }
        return data
      })
      return res
    },
    handleSuccess(response, row, index) {
      if (response.success) {
        row.picUrl = response.fileUrl
      } else {
        Notification.error({
          title: '上传失败，请稍后再试或联系管理员',
          duration: 3000
        })
      }
    },
    handleError() {
      Notification.error({
        title: '上传失败，请稍后再试或联系管理员',
        duration: 3000
      })
    },
    addRow() {
      this.hanlderStatus.push(JSON.parse(JSON.stringify(defaultTableObj)))
    },
    delRow(index) {
      this.hanlderStatus.splice(index, 1)
    },
    addRowRy() {
      this.personalAssess.push(JSON.parse(JSON.stringify(defaultPeopleObj)))
    },
    delRowRy(index) {
      this.personalAssess.splice(index, 1)
    },
    addRowJd() {
      this.streetHandler.push(JSON.parse(JSON.stringify(defaultStreetObj)))
    },
    delRowJd(index) {
      this.streetHandler.splice(index, 1)
    },
    addRowYd() {
      this.matterDetail.push(JSON.parse(JSON.stringify(defaultMatterDetailObj)))
    },
    delRowYd(index) {
      this.matterDetail.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .tit{
    width: 100%;
    font-size: 18px;
    color: #666;
    text-align: left;
    margin: 12px 0 12px;
  }
  .table-form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      ::v-deep .el-form-item{
        width: calc(25% - 20px);
      }
    }
    .item1{
      ::v-deep .el-form-item{
        width: calc(33.3% - 20px);
      }
    }
  }
}

.avatar-uploader {
  ::v-deep.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep.el-upload:hover {
    border-color: #409EFF;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

::v-deep .el-dialog__body{
  max-height: 600px;
  overflow: auto;
}

::v-deep .el-form{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item{
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-right: 20px;
    .el-form-item__label{
      text-align: left;
    }
  }
}
</style>
